<template>
	<view class="">
		<view class="c_presentab">
			<uni-search-bar radius="20" v-model="keywords" placeholder="搜索ID或手机号" clearButton="auto" cancelButton="none" @confirm="search" @clear="cancel" />
			<view class="flex_align_center">
				<view class="c_presentabitem" @tap="tab(1)">
					<view class="c_i" :class="{c_iactive:active==1}">
						直推({{level1}}人)
					</view>
				</view>
				<view class="c_presentabitem" @tap="tab(2)">
					<view class="c_i" :class="{c_iactive:active==2}">
						间推({{level2}}人)
					</view>
				</view>
			</view>
			<view class="team_t">
				<view class="team_type" :class="{'team_type_ac':teamType==1}" @click="changeTeamType(1)">日期优先</view>
				<view class="team_type" :class="{'team_type_ac':teamType==2}" @click="changeTeamType(2)">级别优先</view>
			</view>
		</view>
		<view class="c_list">
			<view class="c_item" v-for="item in list" :key="item.id">
				<image :src="item.avatar" ></image>
				<view class="c_info">
					<view class="c_i_name">
						<view class="c_title">
							<view v-if="item.ismerch" class="c_isshop">{{item.ismerch}}</view>
							<view>{{item.nickname}}</view>
						</view>
						<view class="c_phone" v-if="item.mobile" @click="goPhone(item.mobile)"><image src="/static/user/phone.png"></image>{{item.mobile}}</view>
						<view class="c_phone" v-else>{{item.mobile}}</view>
						<view class="c_time" @click="copyId(item.id)">ID：{{item.id}}</view>
						<!-- <view class="c_time">团队销售礼包：{{item.gifttotal}}</view> -->
						<view class="c_time">直推业绩：￥{{item.recomperformance}}</view>
						<!-- <view class="c_time">已消费：{{item.commission_total}}</view> -->
						<view class="c_time">{{item.createtime}}</view>
					</view>	
					<view class="c_grade">
						<view class="c_g_info" v-if="item.levelname!='会员'">{{item.levelname}}</view>
						<view class="c_name" v-if="item.pnickname">推荐人：{{item.pnickname}}</view>
						<view class="c_name" v-if="active==1">直推好友：{{item.dnum}}</view>
						<view class="c_name" style="text-align: right;;" v-if="active==2">直推好友：{{item.dnum}}</view>
						<view class="c_name" v-if="active==1">间推好友：{{item.jnum}}</view>
						<!-- <view class="c_g_info" @click="$navTo('/pages/user/empower?id='+item.id)" style="margin-top: 10rpx;background: #8405dc;color: #fff;" v-if="active==1&&(item.bonuslevel==0||item.bonuslevel==1)&&isopenset==1">授权身份</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="c_loading">
			<image v-if="isloading" src="/static/business/loading.gif" ></image>
			<text v-if="isempty">到底了~</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				list: [],
				level1: "",
				level2: "",
				page: 0,
				teamType:1,
				isloading:false,
				isempty:false,
				isopenset: 0,
				keywords: ''
			}
		},
		onReachBottom() {
			this.getlist();
		},
		onLoad(option) {
			this.getlist();
		},
		methods: {
			search(){
				this.page = 0;
				this.list = [];
				this.getlist();
			},
			cancel(){
				this.keywords = '';
				this.page = 0;
				this.list = [];
				this.getlist();
			},
			copyId(id){
				uni.setClipboardData({
					data: id,
					success:res=> {
						uni.showToast({
							title: '已复制ID号',
							duration: 1500
						});
					}
				})
			},
			changeTeamType(id){
				if(id == this.teamType) return;
				this.teamType = id;
				this.page = 0;
				this.list = [];
				this.getlist();
			},
			goPhone(phone){
				uni.showActionSheet({
					title: phone+"可能是一个电话号码，你可以",
					itemList: ['呼叫', '复制号码', '添加到手机通讯录'],
					success: function (res) {
						if(res.tapIndex==0){
							uni.makePhoneCall({
								phoneNumber: phone 
							});
						}else if(res.tapIndex==1){
							uni.setClipboardData({
								data: phone
							});
						}else if(res.tapIndex==2){
							uni.addPhoneContact({
								mobilePhoneNumber: phone,
							});
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			getlist(){
				this.page+=1;
				this.isloading=true;
				this.$axios('Team/main', "POST", 'commission', {
					page: this.page,
					level: this.active,
					type: this.teamType,
					keywords: this.keywords
				}).then(res => {
					this.isloading=false;
					if (res.data.code == 200) {
						let length=res.data.data.list.length;
						this.list = this.list.concat(res.data.data.list);
						this.isempty=length<=0?true:false;
						this.level1 = res.data.data.level1;
						this.level2 = res.data.data.level2;
						this.isopenset = res.data.data.isopenset;
					}
				}, (error) => {
				
				})
			},
			tab: function(index) {
				if(this.active == index) return;
				this.active = index;
				this.list =[];
				this.page=0;
				this.isempty=false;
				this.getlist();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
		color: #333;
		padding-bottom: 100upx;
	}

	.c_presentab {
		background: #f2f2f2;
		// display: flex;
		// justify-content: space-between;
		position: fixed;
		top: var(--window-top);
		width: 100%;
		z-index: 100;
		padding-bottom: 14rpx;
		.uni-searchbar{
			background: #fff;
			padding-bottom: 0;
		}
		.c_presentabitem {
			text-align: center;
			width: 50%;
			background: #fff;
			.c_i {
				display: inline-block;
				line-height: 100upx;
				position: relative;
			}

			.c_iactive:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 10upx;
				transform: translateX(-50%);
				width: 50upx;
				border-bottom: 3px solid $base-color;
			}
		}
	}
	.team_t{
		display: flex;
		justify-content: space-evenly;
		.team_type{
			background: #fff;
			font-size: 24rpx;
			border-radius: 8rpx;
			margin-top: 14rpx;
			width: 47%;
			text-align: center;
			line-height: 54rpx;
		}
		.team_type_ac{
			color: $bg-color;
			font-weight: bold;
		}
	}
	.c_presenlist {
		background: #fff;
		padding: 0 20upx;
		box-sizing: border-box;
		margin-top: 20upx;

		.c_presenlists {
			border-bottom: 1px solid #E4E7ED;
			padding: 10px 0;

			.c_dfsb {
				display: flex;
				justify-content: space-between;

				.c_myteamuserimg {
					width: 120upx;
					height: 120upx;
				}
			}
		}
	}
	
	.c_list{
		padding-top: 256rpx;
		overflow: hidden;
	}
.c_item{
	background: #fff;
	border-radius: 20upx;
	padding: 20upx;
	display: flex;
	margin-top: 20upx;
	align-items: center;
}
.c_item image{
	border-radius: 20upx;
	height: 90upx;
	width: 90upx;
}
.c_info{
	padding: 0 15upx;
	display: flex;
	align-items: center;
	flex: 1;
}
.c_phone{
	display: flex;
	align-items: center;
	image{
		width: 30rpx;
		height: 30rpx;
	}
}
.c_i_name{
	flex: 1;
	.c_title{
		display: flex;
		align-items: center;
	}
}
.c_isshop{
	background: #8405dc;
	border-radius: 12upx;
	color: #fff;
	display: inline-block;
	font-size: 22upx;
	padding: 4upx 8upx;
	margin-right: 10rpx;
}
.c_grade view{
	text-align: center;
}
.c_grade{
	display: flex;
	flex-direction: column;
}
.c_g_info{
	border: 1px #8405dc solid;
	border-radius: 15upx;
	color: #8405dc;
	font-weight: bold;
	// width: 170upx;
	margin-left: auto;
	padding: 4rpx 15rpx;
}
.c_name{
	margin-top: 10upx;
	font-size: 22upx;
	color: $font-color-light;
}
.c_time{
	font-size: 24upx;
	color: $font-color-light;
}
.c_loading{
	color: #0062CC;
	padding: 30upx;
	text-align: center;
}
.c_loading image{
	height: 50upx;
	width: 50upx;
}
</style>
